<template>
    <div class="content">
        <!-- 手记 顶部搜索栏 -->
        <div class="m-content">
            <div class="logoBlock">
                <!-- <el-avatar :size="50"></el-avatar>
                <div>用户名</div> -->
                <a href="#" title="手记">
                    <img src="~/assets/img/articleHeader-logo.png" width="100%" height="100%" alt="手记">
                </a>
            </div>
            <div class="searchArticle">
                <el-input placeholder="搜索感兴趣的知识和文章" class="input-with-select" v-model="mBlogQuery.searchArticleContent"   @keydown.enter.native="searchArticle()">    
                </el-input><el-button slot="append" icon="el-icon-search" @click="searchArticle()"></el-button>
            </div>
            <div class="writeArticle">
                <el-button type="primary" icon="el-icon-edit" @click="editArticle()">写文章</el-button>
            </div>
        </div>

        <div class="mblog">
          <!-- <h2>{{ blog.title }}</h2>
          <el-link icon="el-icon-edit" v-if="ownBlog"><router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">编辑</router-link></el-link>
          <el-divider></el-divider>
          <div class="content markdown-body" v-html="blog.content"></div> -->
          <p class="article_title">{{ article.title }}</p>
          <p class="article_update">
            <el-link icon="el-icon-edit" v-if="ownArticle"><router-link :to="{path: '/editArticle/' + articleId}">编辑</router-link></el-link>
          </p>
          <el-divider></el-divider>
          <div class="markdown-body" v-html="article.content"></div>
        </div>

        <div class="extented_content">
        </div>

    </div>
</template>

<script>
import blogApi from '@/api/blog'
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
import cookie from 'js-cookie'


export default {

    asyncData({ params, error }) {
     return {articleId: params.id}
   },

    data() {
      return {
        mBlogQuery: {
            blogType: -1,
            searchArticleContent: ''
        },//根据博客类别和相关信息查询

        article: {
          userId: '',
          title: '',
          content: ''
        },

        ownArticle: false

      }
    },

    created() {
        this.getArticle()
        //this.showUpdateLink()
    },

    methods: {

        //根据文章id获取文章信息
        getArticle() {
            blogApi.getArticle(this.articleId)
              .then(response => {
                this.article.userId = response.data.data.article.userId
                this.article.title = response.data.data.article.title
                // 将内容转为markdown格式
                var MarkdownIt = require('markdown-it'),
                md = new MarkdownIt();
                var result = md.render(response.data.data.article.content);
                this.article.content = result
                console.log(this.article)
                // 如果文章作者为当前登录用户，则显示 编辑 链接
                //从cookie获取用户信息
                var userStr = cookie.get('ucenter')
                // 把字符串转换json对象(js对象)
                if(userStr) {
                  var ucenterInfo = JSON.parse(userStr)
                  if (ucenterInfo.id === this.article.userId) {
                    this.ownArticle = true
                  }
                }
            })
        },

        editArticle() {
            this.$router.push({path:'/editArticle/'})
        },

        //根据文章标题、简介、内容搜索文章
        searchArticle() {
            if (this.mBlogQuery.searchArticleContent.length == 0) {
                this.$message({
                    message: '请先输入关键词',
                    type: 'warning'
                });
            } else {
                this.$router.push({path:'/article/', query:{searchArticleContent:this.mBlogQuery.searchArticleContent}})
            }
        }

    },
}

</script>

<style scoped>
  .content {
    /* 上 右 下 左 */
    margin: 10px 0px 0px 0px;
    /* padding-bottom: 100px; */
  }

  .m-content {
    max-width: 1150px;
    margin: 0 auto;
    align-items: center;
    display: flex;
    position: relative;
  }
  .logoBlock {
    width: 10%;
    padding: 5px;
    display: inline-block;
  }
  .searchArticle {
    vertical-align: top;
    display: inline-block;
    position: absolute;
    right: 130px;
  }
  .el-input {
    /* 搜索框长度 */
    width: 400px;
  }
  .writeArticle {
    background-color: cadetblue;
    /* https://blog.csdn.net/qq_44131760/article/details/104755826  解释了为什么使用 vertical-align*/
    vertical-align: top;
    display: inline-block;
    position: absolute;
    right: 10px;
  }
  .mblog {
      max-width: 1150px;
      margin: 0 auto;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      /* text-align: center; */
      padding-left: 20px;
      padding-bottom: 20px;
  }

  /* 拓展div */
  .extented_content { 
    height: 250px;
    width: 100%;
  }

  p.article_title {
    font-size: 30px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .article_update {
    text-align: right;
    padding-right: 20px;
  }

  .el-link {
    font-size: 20px;
  }

  </style>